<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //其实就是改变元素的top，left(所以得用position: absolute)
        //原理：鼠标点离元素的左上角的距离是不变的(拖拽的时候)
        /*
            可以看看图片
            1，鼠标按下(onmousedown)
                鼠标与元素的距离：鼠标的横/纵(X/Y) - 元素离可视区左边界的距离(obj.offsetLeft/Top)
            2，鼠标抬起（onmouseup）
            3，鼠标移动(onmousemove)
                根据距离计算出
        */
        window.onload=function(){
            var oDiv = document.getElementById('div1');
            //鼠标在元素上的位置
            var disX = 0;
            var disY = 0;
            //鼠标按下
            oDiv.onmousedown=function(ev){//ev 是获取鼠标位置
                var oEvent = ev || event;
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                //鼠标移动(当移动时，就可以进一步的计算元素的位置(根据新的鼠标位置))
                document.onmousemove=function(ev){
                    var oEvent = ev || event;
                    //oDiv.style.left = oEvent.clientX - disX + 'px';
                    //oDiv.style.top = oEvent.clientY - disY + 'px';
                    var l = oEvent.clientX - disX;
                    var t = oEvent.clientY - disY;
                    if(l < 0){
                        l = 0;
                    }else if(l > document.documentElement.clientWidth - oDiv.offsetWidth){
                        l = document.documentElement.clientWidth - oDiv.offsetWidth;
                    }
                    if(t < 0){
                        t = 0;
                    }else if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
                        t = document.documentElement.clientHeight - oDiv.offsetHeight;
                    }
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                }

                document.onmouseup=function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                /*以上程序bug*/
                //1,当鼠标移动过快时，鼠标移出了div，就没用了(就是div太小)
                //oDiv.onmousemove改为document.onmousemove
                //2，当鼠标移到搜索框上时，这时鼠标已经不再div上了，
                //但还能拖，效果是不能拖了{这个问题}

                //3.火狐bug，拖拽完成一次后，第二次拖拽时，会拖出一个,
                //元素的影子(去试试)
                //在onmousedown事件中(就在它的事件中，不要在其他事件中)
                return false;
                /*用户bug
                无聊的用户，把元素拖出可视区了，不见了(就是给你甩出去了)
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
                if(l < 0){
                    l = 0;
                }else if(document.documentElement.offsetWidth - oDiv.offsetLeft){
                    l = document.documentElement.offsetWidth - oDiv.offsetLeft;
                }                
                if(t < 0){
                    t = 0;
                }else if(document.documentElement.offsetHeight - oDiv.offsetTop){
                    t = document.documentElement.offsetHeight - oDiv.offsetTop;
                }
                */
            };
            
            
        }
    </script>
    <style>
    #div1{
        width:200px; height: 100px;background: red;position: absolute;
    }
    </style>
</head>
<body style="margin: 0; padding: 0;">
    <div id="div1"></div>
</body>
</html>